<template>
	<el-container>
		<el-main>
			<el-tabs type="border-card">
				<el-tab-pane label="班级列表">
					<el-card shadow="never">
						<el-form inline>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="班级名称">
										<el-input placeholder="请输入班级名称" v-model="searchForm.className"></el-input>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="关联课程">
										<el-input placeholder="请输入关联课程" v-model="searchForm.subjectId"></el-input>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="主讲老师">
										<el-input placeholder="请输入主讲老师名称"
											v-model="searchForm.mainTeacherUsername"></el-input>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="学管老师">
										<el-input placeholder="请输入学管老师名称"
											v-model="searchForm.manageTeacherUsername"></el-input>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="助教老师">
										<el-input placeholder="请输入助教老师名称"
											v-model="searchForm.assistTeacherUsername"></el-input>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item>
										<el-button type="primary" @click="getClassPageData">搜索</el-button>
										<el-button @click="resetClassSearchForm">重置</el-button>
									</el-form-item>
								</el-col>

							</el-row>
						</el-form>
					</el-card>
					<el-card style="margin-top: 15px;" shadow="never">
						<el-button type="primary" icon="Plus" @click="AOUClass('')">新建班级</el-button>
						<el-button icon="Printer" @click="exportClass">导出</el-button>
						<el-table :data="classTableData" border style="margin-top: 10px;">
							<el-table-column label="班级名称" align="center" width="100" prop="className"></el-table-column>
							<el-table-column label="关联课程" align="center" width="100"
								prop="subjectName"></el-table-column>
							<el-table-column label="学员人数" align="center" width="100" prop="applyNum"></el-table-column>
							<el-table-column label="主讲老师" align="center" width="100"
								prop="mainTeacherUsername"></el-table-column>
							<el-table-column label="学管老师" align="center" width="100"
								prop="manageTeacherUsername"></el-table-column>
							<el-table-column label="助教老师" align="center" width="100"
								prop="assistTeacherUsername"></el-table-column>
							<el-table-column label="班级状态" align="center" width="100">
								<template #="{ row }">
									<template v-for="item in dicts.crm_class_status" :key="item.key">
										<el-tag v-if="row.status == item.v" :type="((statusList[row.status]) as any)">{{
								item.k
							}}</el-tag>
									</template>
								</template>
							</el-table-column>
							<el-table-column label="上课形式" align="center" width="105">
								<template #="{ row }">
									<template v-if="dicts.crm_teaching_method.length > 0">
										<el-tag>{{ dicts.crm_teaching_method[Number(row.teachingMethod) - 1].k
											}}</el-tag>
									</template>
								</template>
							</el-table-column>
							<el-table-column label="上课时间" align="center" width="150">
								<template #="{ row }">
									星期：{{ row.teachingDay }}
									<br>
									时间：{{ row.teachingTime }}
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" fixed="right">
								<template #="{ row }">
									<!-- <el-link v-if="row.arranged === 1 && row.status === 1" :underline="false" type="primary"
										icon="Edit">点名</el-link> -->
									<el-link @click="setLesson(row.id)" :underline="false" type="primary"
										icon="List">排课</el-link>
									<el-link :underline="false" type="primary" icon="List">学员</el-link>
									<el-link @click="AOUClass(row.id)" :underline="false" type="primary"
										icon="Edit">编辑</el-link>
									<el-link @click="delClass(row.id)" :underline="false" type="danger"
										icon="Delete">删除</el-link>
								</template>
							</el-table-column>
						</el-table>
						<XlxPagination v-model:currentPage="searchForm.current" v-model:pageSize="searchForm.size"
							:total="totals" @update:currentPage="getClassPageData" @update:pageSize="updateSize">
						</XlxPagination>
					</el-card>
					<classDialog v-model="dialogVisible" :id="classId" @addSuccess="getClassPageData"></classDialog>
					<lessonDialog v-model="lessonDialogVisible" :id="lessonId"></lessonDialog>
				</el-tab-pane>
				<el-tab-pane label="回收站">

				</el-tab-pane>
			</el-tabs>
		</el-main>
	</el-container>
</template>

<script setup lang="ts">
import { getClassDelApi, getClassExportApi, getClassPageApi } from '@renderer/api/class';
import { useDicts } from '@renderer/composables/dicts';
import { ClassItem } from '@renderer/interface/class';
import { onMounted, ref } from 'vue';
import classDialog from './components/classDialog.vue';
import lessonDialog from './components/lessonDialog.vue';

/* 搜索表单 */
const searchFormValue = () => ({
	current: 1,
	size: 5,
	className: '',
	teachingMethod: '',
	mainTeacherUsername: '',
	assistTeacherUsername: '',
	manageTeacherUsername: '',
	subjectId: '',
	status: ''
})
const searchForm = ref(searchFormValue())
// 重置表单
const resetClassSearchForm = () => {
	searchForm.value = searchFormValue()
	getClassPageData()
}

/* 班级列表 */
const classTableData = ref<ClassItem[]>()
// 获取班级分页数据
const getClassPageData = async () => {
	const { code, data } = await getClassPageApi(searchForm.value)
	if (code !== '200') return

	classTableData.value = data.records
	totals.value = data.total
}
// 字典
const { dicts } = useDicts(['crm_class_status', 'crm_teaching_method'])
// 状态数组
const statusList = ['', 'success', 'danger']

// 新建/修改班级
const AOUClass = (id: string) => {
	classId.value = id
	dialogVisible.value = true
}
// 导出班级
const exportClass = async () => {
	const { code } = await getClassExportApi(searchForm.value)
	if (code !== '200') return

	ElMessage.success('导出成功~')
}
// 删除班级
const delClass = async (id: string) => {
	const { code } = await getClassDelApi(id)
	if (code !== '200') return

	ElMessage.success('删除班级成功~')
	getClassPageData()
}
// 排课
const lessonDialogVisible = ref(false)
const lessonId = ref('')
const setLesson = (id: string) => {
	lessonId.value = id
	lessonDialogVisible.value = true
}

/* 弹出框 */
const dialogVisible = ref(false)
const classId = ref('')

/* 分页组件 */
const totals = ref(0)
const updateSize = () => {
	searchForm.value.current = 1
	getClassPageData()
}

onMounted(() => {
	getClassPageData()
})
</script>

<style scoped></style>